/**
 * Created by Administrator on 2017/11/25.
 */
function isNumber(value) {
    return (/(^-?[0-9]+\.{1}\d+$)|(^-?[1-9][0-9]*$)|(^-?0{1}$)/).test(value + "");
}
Vue.component("input-number", {
    template: "\
    <div class='input-number'>\
    <input type='text' :value='currentValue' @change='handleChange'\
     <button @click='handleUp' :disable='currentValue>=max'>+</button>\
     <button @click='handleDown' :disabled='currentValue<=min'>-</button>\
    </div>",
    props: {
        max: {
            type: Number,
            default: Infinity
        },
        min: {
            type: Number,
            default: -Infinity
        },
        value: {
            type: Number,
            default: 0
        }
    },
    data: function () {
        return {
            currentValue: this.value
        }
    },
    watch: {
        currentValue: function (newValue, oldValue) {
            this.$emit("input", newValue);
            this.$emit("on-change", newValue);
        },
        value: function (newValue, oldValue) {
            this.updateValue(newValue);
        }
    },
    methods: {
        updateValue: function (val) {
            if (val > this.max) val = this.max;
            if (val < this.min) val = this.min;
            this.currentValue = val;
        },
        handleUp: function () {
            if (this.currentValue >= this.max) return;
            this.currentValue++;
        },
        handleDown: function () {
            if (this.currentValue <= this.min) return;
            this.currentValue--;
        },
        handleChange: function (event) {
            var val = event.target.value.trim();
            var max = this.max;
            var min = this.min;
            if (isNumber(val)) {
                val = Number(val);
                this.currentValue = val;
                if (val > max) {
                    this.currentValue = max;
                } else if (val < min) {
                    this.currentValue = min;
                }
            } else {
                event.target.value = this.currentValue;
            }
        }
    },
    mounted: function () {
        this.updateValue(this.value)
    }

});
